<template>
  <div class="app-container">
    <el-card class="box-card" shadow="always">
      <el-tabs v-model="activeName" style="padding-left: 8px;" @tab-click="tabClick">
        <el-tab-pane label="全部" name="0">
          <!-- 搜索表单 -->
          <el-form ref="queryForm" :inline="true" :model="queryParams" size="mini">
            <el-form-item/>
            <el-form-item>
              <el-input
                v-model="queryParams.name"
                clearable
                placeholder="代理名称"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item>
              <el-button
                icon="el-icon-search"
                type="primary"
                size="small"
                @click="handleQuery"
                v-has-permission="['member:member:tree']"
              >搜索
              </el-button>
              <el-button
                icon="el-icon-refresh"
                size="small"
                type="danger"
                @click="handleReset"
              >重置
              </el-button>
              <el-button
                icon="el-icon-download"
                size="small"
                type="info"
                @click="handleExport"
                v-has-permission="['member:member:exportAgentRelation']"
              >导出
              </el-button>
            </el-form-item>
          </el-form>
          <!-- 数据表格 -->
          <el-table
            v-loading="loading"
            :data="pageList"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
            border
            highlight-current-row
            row-key="id"
            size="mini"
          >
            <el-table-column ref="table" prop="avatar" label="代理头像">
              <template slot-scope="scope">
                <el-image :src="scope.row.avatar" class="el-avatar" :preview-src-list="[scope.row.avatar]">
                  <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline"/>
                  </div>
                </el-image>
              </template>
            </el-table-column>
            <el-table-column label="代理名称">
              <template slot-scope="scope">
                {{ scope.row.realName }}
              </template>
            </el-table-column>
            <el-table-column label="当前等级" prop="memberLevel.name"/>
            <el-table-column label="上级" prop="parentName"/>
            <el-table-column label="直属人数" prop="directlyPeople"/>
            <el-table-column label="团队人数" prop="teamCount"/>
            <el-table-column label="手机号" prop="mobile"/>
            <el-table-column label="个人订单业绩" prop="orderMoney"/>
            <el-table-column label="个人充值金额" prop="recharge"/>
            <el-table-column label="加入时间" prop="createTime"/>
          </el-table>
          <pagination
            v-show="pagination.total > 0"
            :limit.sync="pagination.limit"
            :page.sync="pagination.page"
            :total="pagination.total"
            @pagination="handleQuery"
          />
        </el-tab-pane>
        <el-tab-pane label="合伙人" name="1">
          <!-- 搜索表单 -->
          <el-form ref="queryForm" :inline="true" :model="queryParams" size="mini">
            <el-form-item/>
            <el-form-item>
              <el-input
                v-model="queryParams.name"
                clearable
                placeholder="代理名称"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item>
              <el-button
                icon="el-icon-search"
                type="primary"
                @click="handleQuery"
                v-has-permission="['member:member:tree']"
              >搜索
              </el-button>
              <el-button
                icon="el-icon-refresh"
                @click="handleReset"
              >重置
              </el-button>
            </el-form-item>
          </el-form>
          <!-- 数据表格 -->
          <el-table
            v-loading="loading"
            :data="pageList"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
            border
            highlight-current-row
            row-key="id"
            size="mini"
          >
            <el-table-column ref="table" prop="avatar" label="代理头像">
              <template slot-scope="scope">
                <el-image :src="scope.row.avatar" class="el-avatar" :preview-src-list="[scope.row.avatar]">
                  <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline"/>
                  </div>
                </el-image>
              </template>
            </el-table-column>
            <el-table-column label="代理名称">
              <template slot-scope="scope">
                {{ scope.row.realName }}
              </template>
            </el-table-column>
            <el-table-column label="当前等级" prop="memberLevel.name"/>
            <el-table-column label="上级" prop="parentName"/>
            <el-table-column label="直属人数" prop="directlyPeople"/>
            <el-table-column label="团队人数" prop="teamCount"/>
            <el-table-column label="手机号" prop="mobile"/>
            <el-table-column label="个人订单业绩" prop="orderMoney"/>
            <el-table-column label="个人充值金额" prop="recharge"/>
            <el-table-column label="加入时间" prop="createTime"/>
          </el-table>
          <pagination
            v-show="pagination.total > 0"
            :limit.sync="pagination.limit"
            :page.sync="pagination.page"
            :total="pagination.total"
            @pagination="handleQuery"
          />
        </el-tab-pane>
      </el-tabs>

    </el-card>
  </div>
</template>

<script>
import { exportAgentRelation, listMemberTree } from '@/api/ums/member'
// import { exportRecord } from '@/api/ums/flower'
import { downloadFile } from '@/utils'
import checkPermission from '@/utils/permission'

export default {
  name: 'Index',
  data() {
    return {
      activeName: '0',
      loading: false,
      ids: [],
      single: true,
      multiple: true,
      queryParams: {
        name: undefined,
        queryMode: undefined
      },
      pageList: [],
      pagination: {
        page: 1,
        limit: 10,
        total: 0
      },
      dataForm: {
        realName: ''
      }
    }
  },
  async created() {
    this.handleQuery()
  },
  methods: {
    checkPermission,
    tabClick(val) {
      if (val.name === '1') {
        this.queryParams.levelId = 5
      } else {
        this.queryParams.levelId = undefined
      }
      this.handleQuery()
    },
    handleQuery() {
      this.loading = true
      this.queryParams.pageNum = this.pagination.page
      this.queryParams.pageSize = this.pagination.limit
      listMemberTree(this.queryParams).then(({ data }) => {
        this.pageList = data.list
        this.pagination.total = data.totalCount
        this.loading = false
      })
    },
    handleReset() {
      this.pagination = {
        page: 1,
        limit: 10,
        total: 0
      }
      this.queryParams.name = undefined
      this.handleQuery()
    },
    /** 导出按钮操作 */
    handleExport() {
      const dataForm = this.dataForm
      delete dataForm.pageNum
      delete dataForm.pageSize
      this.$confirm('是否确认导出所有数据?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        return exportAgentRelation(dataForm)
      }).then(response => {
        downloadFile(response.data, '代理关系数据', 'xls')
      })
    }
  }
}
</script>

<style scoped>
/deep/ .el-table th > .cell {
  text-align: center;
}

/deep/ .el-table .cell {
  text-align: center;
}
</style>
